<template>
  <div class="wrapper">
    <Header :title="title" :back="back"></Header>

    <p class="title">录入新单词</p>
    <div class="section">
      <ul>
        <li>
          <span>单词</span>
          <input type="text" v-model="newWord.word" placeholder="请输入一个单词" class="text1"/>
        </li>
        <li>
          <span>发音</span><input type="text" v-model="newWord.pronounce" placeholder="请输入此单词的发音" class="text1"/>
        </li>
        <li>
          <span>中文</span><input type="text" v-model="newWord.description" placeholder="请输入汉语意思" class="text1"/>
        </li>
      </ul>
    </div>
    <button v-on:click="addWord(newWord)" class="button1">确认添加</button>
  </div>
</template>

<script>
import Header from "../header/header"
import {nemoMD5} from "../../assets/js/md5.js"
import qs from "qs";

export default {
  name: 'AddWord',
  components: {
    Header
  },
  data() {
    return {
      newWord: {
        word: '',
        pronounce: '',
        description: '',
        speech:''
      },
      title: "添加新单词",
      back: "/Words",

      appKey: "4d0315a39cca722e",
      q: '',
      salt: 2,
      miyao: "D2XNf8CGnHtQXMhKNgK7ywTp2I1WdGYs",
    }

  },
  methods: {
    addWord: function (newWord) {
      //打印出新增的单词
      console.log(newWord.word);
      let that = this;
      if (newWord.word == '') {
        alert("输入的单词不能为空！");
      } else {
        //添加有道智云的单词API===================================================================================
        // console.log(newWord.word);
        var signn = nemoMD5(this.appKey + newWord.word + this.salt + this.miyao);
        this.$http.jsonp("http://openapi.youdao.com/api?q=" + newWord.word + "&from=EN&to=zh_CHS&appKey=4d0315a39cca722e&salt=2&sign=" + signn + "&ext=mp3&voice=0",
            //   {//请求参数
            //     // params: {}
            //   }
        ).then((res) => {
          let data = res.data
          if(data.isWord){
            let basic = data.basic;
            that.newWord.pronounce = basic.phonetic;
            that.newWord.description = basic.explains.toString();
            that.newWord.speech = data.speakUrl;
            console.log(that.newWord)
            that.axios.post('insertWord',qs.stringify({
              pronounce:that.newWord.pronounce,
              description:that.newWord.description,
              speech:that.newWord.speech,
              word:that.newWord.word
            })).then((res)=>{
              let data = res.data;
              if(data.code === 200){
                alert(data.msg);
                this.$router.push({
                  path: "/words"
                })
              }else {
                alert(data.msg)
              }
              // console.log(res.data)
            });
          }else {
            alert('输入有误，这不是一个单词，请重新输入！')
          }
        })
      }
    }
  }
}

</script>

<style scoped>
.wrapper {
  margin-top: 55px;
  text-align: left;
}

.title {
  padding-left: 23px;
  margin-bottom: 10px;
  color: #999;
}

.section {
  background: #ffffff;
  padding: 0 23px;
}

.section li {
  height: 55px;
  line-height: 55px;
  border-bottom: 1px #eee solid;
  font-size: 16px;
}

.section input {
  border: none;
  margin-left: 16px;
  font-size: 14px;
}

.button1 {
  border: 0;
  background: #41b883;
  border-radius: 3px;
  height: 42px;
  width: calc(100% - 66px);
  margin: 80% 33px 10% 33px;
  font-size: 16px;
  font-weight: bold;

  color: #ffffff;
}
</style>
